<template>
  <div class="select-content">
    <div class="select" :style="{ backgroundColor: headBg }">
      <div class="list">
        <div
          class="title"
          @click="changeSelect(index)"
          v-for="(item, index) in filterItems"
          :key="index"
        >
          {{ getTitle(index)|| '' }}
          <u-icon
            name="arrow-down-fill"
            v-if="activeSelect != index"
            color="#E5E5E5"
            size="11"
          />
          <u-icon name="arrow-up-fill" v-else color="#E5E5E5" size="11" />
        </div>
      </div>
    </div>
    <div class="list-modal" v-if="showSelect">
      <div class="modal" @click="closeModal()"></div>
      <div class="list-select">
        <div
          :class="[
            'list-option',
            item.value == selectedArr[activeSelect] ? 'active' : '',
          ]"
          :style="{
            color:
              item.value == selectedArr[activeSelect]
                ? themeColor
                  ? themeColor
                  : filterActiveColor
                : '',
          }"
          v-for="(item, index) in selectList"
          :key="index"
          @click="changeSelectContent(item.value)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { article } from "@dcloudio/vue-cli-plugin-uni/packages/postcss/tags";
import { mapState } from "vuex";
export default {
  props: {
    //   筛选数据
    filterItems: {
      required: true,
      type: Array,
      default: [],
    },
    // 头部背景色
    headBg: {
      default: "#f7f7f7",
    },
    // 选中色
    filterActiveColor: {
      default: "#ffb72f",
    },
    defaultList: {
      default: [],
      type: Array,
    },
  },
  data() {
    return {
      showSelect: false,
      selectedArr: [],
      selectList: [],
      activeSelect: -1,
    };
  },
  computed: {
    getTitle() {
      return (index) => {
        let { filterItems, selectedArr } = this;
        let val = filterItems[index].find((item) => {
          return item.value == selectedArr[index];
        });
        return val?.label;
      };
    },
    ...mapState("sp-common/base", ["themeColor"]),
  },
  watch: {
    filterItems: {
      handler(value) {
        this.initSelectArr();
      },
      deep: true,
    },
    defaultList: {
      handler(value) {
        if(value.length<=0) return
        this.initSelectArr();
      },
      deep: true,
    },
  },
  created() {
    this.initSelectArr();
  },
  methods: {
    //   初始化所有的参数
    initSelectArr() {
      let { filterItems, defaultList } = this;
      if (!filterItems) return;
      this.selectedArr = [];
      filterItems.forEach((item, index) => {
        this.selectedArr.push(item[0].value);
      });
      if (defaultList.length > 0) {
        defaultList.forEach((ele, index) => {
          this.selectedArr[index] = ele;
        });
      }
    },
    // 改变头部切换事件
    changeSelect(index) {
      this.activeSelect = index;
      this.selectList = this.filterItems[index];
      this.showSelect = true;
    },
    // 选择内容主体切换事件
    changeSelectContent(val) {
      this.selectedArr[this.activeSelect] = val;
      this.showSelect = false;
      let valObj = {};
      this.selectedArr.forEach((item, index) => {
        valObj[`key${index + 1}`] = item;
      });
      this.$emit("changeSelect", valObj);
      this.activeSelect = -1;
    },
    // 点击modal关闭
    closeModal() {
      this.showSelect = false;
      this.activeSelect = -1;
    },
  },
};
</script>

<style lang="scss" scoped>
.select-content {
  position: relative;
  .select {
    background: #f7f7f7;
    margin-top: 25rpx;
    padding: 0 30rpx;
    position: relative;

    .list {
      display: flex;
      padding: 20rpx 0;
      .title {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        font-size: 27rpx;
        font-weight: 500;
        color: #181818;
        ::v-deep .u-icon {
          margin-left: 15rpx;
        }
      }
    }
  }
  .list-modal {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    .modal {
      background-color: #00000050;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .list-select {
      position: absolute;
      top: 0;
      left: 0;
      max-height: 50vh;
      background-color: #fff;
      width: 100%;
      padding: 30rpx;
      overflow-y: scroll;
      font-size: 27rpx;
      font-weight: 500;
      color: #181818;
      view:last-child {
        margin-bottom: 0;
      }
      .list-option {
        margin-bottom: 44rpx;
      }
    }
    .active {
      font-weight: bold;
      // color: #ffb72f;
    }
  }
}
</style>